UI/UX CASE STUDY
Dirty Bomb
--
Dirty Bomb is an intense Free-to-Play competitive shooter from Splash Damage, creators of Wolfenstein: Enemy Territory.
--
.Wireframes
--
.Mockups
--
.Working process
WIREFRAMES
I started by working on the wireframes, using Adobe XD, which includes:
● Assimilating and appropriating the briefing
● Sketching
● Researching and studying other games (see Moodboard below)
● Wireframing
○ Building a design system (see screenshot below)
● Assimilating and appropriating the briefing
● Sketching
● Researching and studying other games (see Moodboard below)
● Wireframing
○ Building a design system (see screenshot below)
Moodboard includes images from Dirty Bomb, World War Z, Fortnite, Apex legends, Hyper Scape, Valorant, Call of Duty: Warzone, Heroes of the Storm, Hunt: Showdown.
Design system includes: fonts, elements, icons, components and patterns. It is built on an 8px grid system.
MOCKUPS
● Then I moved over Illustrator and Photoshop to create the high fidelity art mockups.
This includes:
○ Assimilating and appropriating the art style
○ Sketching
○ Researching additional references
This includes:
○ Assimilating and appropriating the art style
○ Sketching
○ Researching additional references
--
.My approach
SETTING THE CONTEXT
“A new threat has emerged from the depths of London. It’s time for the CDA and the Jackal to team up and regain control of the city. Piccadilly Circus was once the heartbeat of the city. It’s now time to get it back under control.”
As Dirty Bomb takes place in a fictional London, I really wanted the main menu home screen to be set in an iconic location and in a way that serves the fiction of the game and the player’s progression.
The background would be animated and would give you a sense of what’s going on,
depending on the chapter you have selected (in this example, Chapter 1 takes place in an
abandoned Piccadilly Circus). Any resemblance to actual events is entirely coincidental...
depending on the chapter you have selected (in this example, Chapter 1 takes place in an
abandoned Piccadilly Circus). Any resemblance to actual events is entirely coincidental...
NAVIGATION
I found that using the metaphor of the London’s tube for the main navigation was a good fit, on different levels:
● From a fictional point of view, the London Underground, which opened in 1863, was the world's first underground railway system. It’s iconic and provides an opportunity for the lore.
○ E.g. as a transportation system for the mercs to travel across a contaminated city.
● From an UX point of view, to build additional features based on the clear and comprehensible underground chart understood across the world.
○ E.g. to design a perk/skill tree, a mission selection screen, etc.
● From an artistic point of view, the design of this iconic map provides a “vocabulary of shapes” (i.e. diagonales, patterns, colours, layout) to help us craft a standalone product that feels like a distinct experience.
○ E.g. the main navigation menu inspired by London's tube map.
● From a fictional point of view, the London Underground, which opened in 1863, was the world's first underground railway system. It’s iconic and provides an opportunity for the lore.
○ E.g. as a transportation system for the mercs to travel across a contaminated city.
● From an UX point of view, to build additional features based on the clear and comprehensible underground chart understood across the world.
○ E.g. to design a perk/skill tree, a mission selection screen, etc.
● From an artistic point of view, the design of this iconic map provides a “vocabulary of shapes” (i.e. diagonales, patterns, colours, layout) to help us craft a standalone product that feels like a distinct experience.
○ E.g. the main navigation menu inspired by London's tube map.
“Rather than emphasising distance and geographical accuracy, like other maps, Beck [who produced this imaginative and beautifully simple design back in 1933] based his on the circuit diagrams he
drew for his day job; stripping the sprawling Tube network down to a neat diagram of coloured,
criss-crossing lines.”
drew for his day job; stripping the sprawling Tube network down to a neat diagram of coloured,
criss-crossing lines.”
“The result was an instantly clear and comprehensible chart that would become an essential guide
to London - and a template for transport maps the world over.”
https://tfl.gov.uk/corporate/about-tfl/culture-and-heritage/art-and-design/harry-becks-tube-map
to London - and a template for transport maps the world over.”
https://tfl.gov.uk/corporate/about-tfl/culture-and-heritage/art-and-design/harry-becks-tube-map
Other games have successfully used a subway map (e.g. Metro: Last Light)
SUGGEST ACTIVITIES FOR THE PLAYER
As a cooperative stand alone game, I wanted to put the emphasis on cooperation. The central
and main part of the screen showcases your character and two additional slots, either empty or
filled with other players. An incentive encourages you to team-up with friends to complete the
missions as a team.
and main part of the screen showcases your character and two additional slots, either empty or
filled with other players. An incentive encourages you to team-up with friends to complete the
missions as a team.
On the right hand side of the screen features a contract panel. In the same way as in Dirty Bomb,
the player can complete contracts and earn credits. The contract panel features the same reroll
feature as the original Dirty Bomb.
the player can complete contracts and earn credits. The contract panel features the same reroll
feature as the original Dirty Bomb.
The friend list displays your friends status and current situation and location in the game (i.e.
which game mode they are playing in, etc.).
which game mode they are playing in, etc.).
The carousel on the right hand side also advertises special events.
GET THEM UP TO SPEED ON WHAT HAPPENED WHILE THEY WERE GONE
The friends list plays a key role to see if your friends played while you were gone. If they did,
this tells you which level they reached, which rank they are in and possibly more information
as you highlight them on the list.
this tells you which level they reached, which rank they are in and possibly more information
as you highlight them on the list.
Once you join a team you can also select the toggle stats button at the bottom of the screen
to display more stats and compare your stats with the players in your party.
to display more stats and compare your stats with the players in your party.
The carousel on the right hand side of the screen provides additional information regarding
the latest news, patch, etc.
the latest news, patch, etc.
HIGHLIGHT STORE ITEMS OF INTEREST
My initial idea was to have a 2D carousel (see wireframes) that would alternatively display
shop items and news about the game.
shop items and news about the game.
But as I was working on the Piccadilly Circus background, as a way to strengthen the
emotional connection between the player and the game settings, I realised that it would be
great to take advantage of the background as a way to display more content and strengthen
that connection. I decided to embed the shop advertisements into Piccadilly’s massive
screens.
emotional connection between the player and the game settings, I realised that it would be
great to take advantage of the background as a way to display more content and strengthen
that connection. I decided to embed the shop advertisements into Piccadilly’s massive
screens.
As you interact with the screen (mouse click) the camera would transition to the LED screen
space.
space.
--
.Art considerations
BACKGROUND
I recreated a view from Piccadilly Circus using different photo references and the hardest
part was to find the images with the right screen position and angle.
part was to find the images with the right screen position and angle.
Ideally, I would have used a 3D scene and position the camera the way I needed it or I
would have taken pictures myself.
would have taken pictures myself.
I added a few elements to the cityscape, inspired by the CDA technology that I found on
different art concepts, produced for the original game, such as roof antennas, military
helicopters, people in hazard suits, etc.
different art concepts, produced for the original game, such as roof antennas, military
helicopters, people in hazard suits, etc.
The main colour for the other half of the screen is a very saturated dark cold azure
Tangaroa blue, as found on the Dirty Bomb “Cases” screen that has been provided to me.
Tangaroa blue, as found on the Dirty Bomb “Cases” screen that has been provided to me.
The scanline effect visible on the same “Cases” screen inspired me to experiment with
different screen distortion effects which lead to the final giant LED screen.
different screen distortion effects which lead to the final giant LED screen.
SHAPES AND TEXTURES
As a reminder of the original game’s identity, I used polygonal shapes in the background
and on the player’s character highlight.
and on the player’s character highlight.
Subtle polygonal patterns have also been used in the sky (which reminded me of The
Gherkin in London :D).
Gherkin in London :D).
On the top left of the screen, around the subway map I also used a lightly textured brush to give a sense of material like concrete.
I reused the hexagonal shape for the rank level and had a different take on the avatar
portraits with an octagonal shape.
portraits with an octagonal shape.
COLORS
I believe it was important to preserve the original color identity (yellow, grey, blue, purple,
orange) especially in regards to the main UI interactions, UI events and currencies but I
decided to contrast them with a bolder font as you can see on the primary buttons (e.g.
Ready , Store ). I have also used similar type of transparency and fading effects as the ones visible on the Dirty Bomb references.
orange) especially in regards to the main UI interactions, UI events and currencies but I
decided to contrast them with a bolder font as you can see on the primary buttons (e.g.
Ready , Store ). I have also used similar type of transparency and fading effects as the ones visible on the Dirty Bomb references.
FONTS
The font I have used is called Magistral . As a font that has originally been developed for
Russian railways I thought it would be a good way to strengthen the underground vibe I wanted to inject in the UI.
Russian railways I thought it would be a good way to strengthen the underground vibe I wanted to inject in the UI.
Secondly, this font works well in advertising and display soit appears to be totally appropriate to be used on the giant LED screen, to advertise store items or game news. Finally this font comes withmany weights and styles which allows for more variety. I also found the condensed version very helpful to save screenspace where needed without compromising the readability.
“The first three weights of the family were designed at ParaType (ParaGraph) in 1997 by Dmitry Kirsanov. They were based on the artworks of Moscow graphic designer Andrey Kryukov (1923-1997). The original version was developed by Kryukov at the end of the 1960s for Russian railways. The proportions and elements of construction were influenced by Eurostile (1962) by Aldo Novarese. Magistral works well in advertising and display typography. Dmitry Kirsanov extended the character set in 2009 and added new styles, correcting the old ones.”
https://www.paratype.com/fonts/pt/magistral
https://www.paratype.com/fonts/pt/magistral
